<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室 - 大模型师生助手</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/teacherview.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js" defer></script>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        .card {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .content-header {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .content-header h2 {
            color: #333;
            font-size: 18px;
            font-weight: 600;
        }

        /* 标签切换样式 */
        .chat-tabs {
            display: flex;
            border-bottom: 1px solid #e0e0e0;
            height: 45px; /* 固定标签栏高度 */
            flex-shrink: 0; /* 禁止被压缩 */
        }
        .chat-tab {
            padding: 0 20px;
            line-height: 45px; /* 垂直居中 */
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: #666;
            border-bottom: 2px solid transparent;
        }
        .chat-tab.active {
            color: #4285f4;
            border-bottom-color: #4285f4;
        }
        .chat-tab:hover {
            background-color: #f5f5f5;
        }

        /* 聊天室容器（核心修改） */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 40px); /* 严格限制高度为可视区减去边距 */
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            overflow: hidden; /* 容器内溢出内容隐藏 */
        }

        /* 群聊面板 */
        .group-chat-panel {
            display: flex;
            height: calc(100% - 45px); /* 减去标签栏高度 */
            overflow: hidden; /* 禁止面板自身滚动 */
        }
        /* DeepSeek聊天面板 */
        .deepseek-chat-panel {
            display: none;
            height: calc(100% - 45px); /* 减去标签栏高度 */
            overflow: hidden; /* 禁止面板自身滚动 */
        }

        /* 用户列表面板 */
        .user-list-panel {
            width: 200px;
            border-right: 1px solid #e0e0e0;
            padding: 10px;
            overflow-y: auto; /* 列表独立滚动 */
            background-color: #fcfcfc;
            height: 100%; /* 占满父容器高度 */
            flex-shrink: 0; /* 禁止宽度被压缩 */
        }
        .user-list-panel h3 {
            margin-top: 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
            font-size: 16px;
            color: #555;
        }
        .user-item {
            padding: 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            border-radius: 3px;
            padding-left: 5px;
        }
        .user-item:hover {
            background-color: #f0f0f0;
        }
        .user-item.teacher::before { content: "👨‍🏫"; }
        .user-item.student::before { content: "👨‍🎓"; }
        .user-item.system::before { content: "🔔"; }

        /* 聊天内容区域（核心修改） */
        .chat-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden; /* 子元素不溢出 */
        }
        .chat-area {
            flex: 1; /* 占输入区上方所有空间 */
            padding: 15px;
            overflow-y: auto; /* 消息区独立滚动 */
            background-color: #f9f9f9;
        }

        /* 输入区域（核心修改） */
        .chat-input-container {
            border-top: 1px solid #e0e0e0;
            background-color: #fff;
        }
        /* 表情按钮 */
        .emoji-btn {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            padding: 5px 10px;
            color: #666;
        }
        .emoji-btn:hover {
            color: #4285f4;
            background-color: #f0f0f0;
            border-radius: 4px;
        }
        /* 表情面板 */
        .emoji-panel {
            display: none;
            padding: 10px;
            background-color: #fff;
            border-bottom: 1px solid #e0e0e0;
            max-height: 150px;
            overflow-y: auto;
        }
        .emoji-category {
            margin-bottom: 10px;
        }
        .emoji-category-title {
            font-size: 12px;
            color: #888;
            margin-bottom: 5px;
            padding-left: 5px;
        }
        .emoji-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 5px;
        }
        .emoji-item {
            font-size: 20px;
            text-align: center;
            padding: 5px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .emoji-item:hover {
            background-color: #f0f0f0;
            transform: scale(1.1);
        }
        /* 聊天输入区域 */
        .chat-input-area {
            display: flex;
            padding: 10px;
            gap: 10px;
            height: 60px; /* 固定高度 */
            flex-shrink: 0; /* 禁止被压缩 */
            box-sizing: border-box;
        }
        .message-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
            font-size: 14px;
            height: 40px;
            box-sizing: border-box;
        }
        .message-input:focus {
            border-color: #4285f4;
        }

        /* 按钮样式 */
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            height: 40px;
            box-sizing: border-box;
        }
        .btn.primary {
            background-color: #4285f4;
            color: white;
        }
        .btn.primary:hover {
            background-color: #3367d6;
        }
        .btn.secondary {
            background-color: #f0f0f0;
            color: #333;
        }
        .btn.secondary:hover {
            background-color: #e0e0e0;
        }

        /* 消息气泡样式 */
        .message {
            margin: 2px 0;
            max-width: 70%;
            padding: 6px 10px;
            border-radius: 8px;
            word-wrap: break-word;
            position: relative;
            display: inline-block;
            clear: both;
            line-height: 1.4;
            border: none;
        }
        .message.self {
            background-color: #95ec69;
            float: right;
            border-top-right-radius: 2px;
        }
        .message.others {
            background-color: #ffffff;
            float: left;
            border-top-left-radius: 2px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .message.system {
            background-color: #f0f0f0;
            color: #888;
            margin: 4px auto;
            max-width: 50%;
            text-align: center;
            font-size: 13px;
            float: none;
            padding: 4px 10px;
            display: table;
        }
        .message strong {
            font-size: 12px;
            color: #555;
            padding: 0;
            display: block;
            margin-bottom: 2px;
        }
        .message.self strong {
            color: #2d7d0e;
        }
        .message.system strong {
            color: #777;
        }
        .message .content {
            white-space: pre-line;
            display: block;
            margin-top: 4px;
        }
        /* 消息中的表情放大显示 */
        .message .content emoji {
            font-size: 1.2em;
            vertical-align: middle;
        }

        /* DeepSeek 加载动画样式 */
        .loading-text {
            position: relative;
        }
        @keyframes dotPulse {
            0% { content: '...'; }
            33% { content: '..'; }
            66% { content: '.'; }
            100% { content: '...'; }
        }
        .loading-text::after {
            content: '...';
            animation: dotPulse 1.5s infinite;
        }
        .deepseek-loading {
            color: #666;
            font-style: italic;
        }
        .message.loading {
            background-color: #f0f0f0;
            color: #666;
        }
    </style>
</head>
<body>
<div class="card chat-container">
    <!-- 标签切换区域 -->
    <div class="chat-tabs">
        <div class="chat-tab active" onclick="switchChat('group')">群聊</div>
        <div class="chat-tab" onclick="switchChat('deepseek')">你的AI朋友</div>
    </div>

    <!-- 群聊面板 -->
    <div class="group-chat-panel">
        <!-- 用户列表面板 -->
        <div class="user-list-panel">
            <h3>在线用户</h3>
            <div id="userListContainer">
                <!-- 用户列表将动态加载 -->
            </div>
        </div>

        <!-- 群聊内容区域 -->
        <div class="chat-content">
            <div id="groupChatArea" class="chat-area">
                <!-- 群聊消息会动态加载到这里 -->
            </div>
            <div class="chat-input-container">
                <!-- 表情选择面板 -->
                <div class="emoji-panel" id="groupEmojiPanel">
                    <div class="emoji-category">
                        <div class="emoji-category-title">常用表情</div>
                        <div class="emoji-grid">
                            <div class="emoji-item" onclick="insertEmoji('😀', 'group')">😀</div>
                            <div class="emoji-item" onclick="insertEmoji('😁', 'group')">😁</div>
                            <div class="emoji-item" onclick="insertEmoji('😂', 'group')">😂</div>
                            <div class="emoji-item" onclick="insertEmoji('🤣', 'group')">🤣</div>
                            <div class="emoji-item" onclick="insertEmoji('😃', 'group')">😃</div>
                            <div class="emoji-item" onclick="insertEmoji('😄', 'group')">😄</div>
                            <div class="emoji-item" onclick="insertEmoji('😅', 'group')">😅</div>
                            <div class="emoji-item" onclick="insertEmoji('😆', 'group')">😆</div>
                            <div class="emoji-item" onclick="insertEmoji('😉', 'group')">😉</div>
                            <div class="emoji-item" onclick="insertEmoji('😊', 'group')">😊</div>
                            <div class="emoji-item" onclick="insertEmoji('🙂', 'group')">🙂</div>
                            <div class="emoji-item" onclick="insertEmoji('🙃', 'group')">🙃</div>
                            <div class="emoji-item" onclick="insertEmoji('😋', 'group')">😋</div>
                            <div class="emoji-item" onclick="insertEmoji('😎', 'group')">😎</div>
                            <div class="emoji-item" onclick="insertEmoji('😍', 'group')">😍</div>
                            <div class="emoji-item" onclick="insertEmoji('😘', 'group')">😘</div>
                        </div>
                    </div>
                    <div class="emoji-category">
                        <div class="emoji-category-title">情感表情</div>
                        <div class="emoji-grid">
                            <div class="emoji-item" onclick="insertEmoji('❤️', 'group')">❤️</div>
                            <div class="emoji-item" onclick="insertEmoji('💘', 'group')">💘</div>
                            <div class="emoji-item" onclick="insertEmoji('👍', 'group')">👍</div>
                            <div class="emoji-item" onclick="insertEmoji('👎', 'group')">👎</div>
                            <div class="emoji-item" onclick="insertEmoji('👏', 'group')">👏</div>
                            <div class="emoji-item" onclick="insertEmoji('🎉', 'group')">🎉</div>
                            <div class="emoji-item" onclick="insertEmoji('💪', 'group')">💪</div>
                            <div class="emoji-item" onclick="insertEmoji('🙏', 'group')">🙏</div>
                        </div>
                    </div>
                </div>
                <!-- 输入区域 -->
                <div class="chat-input-area">
                    <button class="emoji-btn" onclick="toggleEmojiPanel('group')">😀</button>
                    <input type="text" class="message-input" id="groupMessageInput" placeholder="输入群聊消息...">
                    <button class="btn primary" onclick="sendGroupMessage()">发送</button>
                    <button class="btn secondary" onclick="closeGroupConnection()">断开连接</button>
                </div>
            </div>
        </div>
    </div>

    <!-- DeepSeek聊天面板 -->
    <div class="deepseek-chat-panel">
        <div class="chat-content">
            <div id="deepseekChatArea" class="chat-area">
                <!-- DeepSeek聊天消息会动态加载到这里 -->
            </div>
            <div class="chat-input-container">
                <!-- 表情选择面板 -->
                <div class="emoji-panel" id="deepseekEmojiPanel">
                    <div class="emoji-category">
                        <div class="emoji-category-title">常用表情</div>
                        <div class="emoji-grid">
                            <div class="emoji-item" onclick="insertEmoji('😀', 'deepseek')">😀</div>
                            <div class="emoji-item" onclick="insertEmoji('😁', 'deepseek')">😁</div>
                            <div class="emoji-item" onclick="insertEmoji('😂', 'deepseek')">😂</div>
                            <div class="emoji-item" onclick="insertEmoji('🤣', 'deepseek')">🤣</div>
                            <div class="emoji-item" onclick="insertEmoji('😃', 'deepseek')">😃</div>
                            <div class="emoji-item" onclick="insertEmoji('😄', 'deepseek')">😄</div>
                            <div class="emoji-item" onclick="insertEmoji('😅', 'deepseek')">😅</div>
                            <div class="emoji-item" onclick="insertEmoji('😆', 'deepseek')">😆</div>
                        </div>
                    </div>
                </div>
                <!-- 输入区域 -->
                <div class="chat-input-area">
                    <button class="emoji-btn" onclick="toggleEmojiPanel('deepseek')">😀</button>
                    <input type="text" class="message-input" id="deepseekMessageInput" placeholder="输入消息给DeepSeek...">
                    <button class="btn primary" onclick="sendDeepseekMessage()">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 切换聊天面板
    function switchChat(type) {
        // 切换标签样式
        document.querySelectorAll('.chat-tab').forEach(tab => {
            tab.classList.remove('active');
        });
        document.querySelector(`.chat-tab[onclick="switchChat('${type}')"]`).classList.add('active');

        // 切换面板显示
        if (type === 'group') {
            document.querySelector('.group-chat-panel').style.display = 'flex';
            document.querySelector('.deepseek-chat-panel').style.display = 'none';
        } else {
            document.querySelector('.group-chat-panel').style.display = 'none';
            document.querySelector('.deepseek-chat-panel').style.display = 'block';
        }
    }

    // 切换表情面板显示/隐藏
    function toggleEmojiPanel(type) {
        const panel = document.getElementById(`${type}EmojiPanel`);
        panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
    }

    // 插入表情到输入框
    function insertEmoji(emoji, type) {
        const input = document.getElementById(`${type}MessageInput`);
        // 在光标位置插入表情
        const start = input.selectionStart;
        const end = input.selectionEnd;
        const currentValue = input.value;

        // 拼接新值
        const newValue = currentValue.substring(0, start) + emoji + currentValue.substring(end);
        input.value = newValue;

        // 移动光标到表情后面
        input.focus();
        input.selectionStart = start + emoji.length;
        input.selectionEnd = start + emoji.length;

        // 保持面板打开（可选）
        // toggleEmojiPanel(type);
    }

    // 以下为原有功能占位函数（实际项目中需实现）
    function sendGroupMessage() {
        const input = document.getElementById('groupMessageInput');
        const message = input.value.trim();
        if (message) {
            // 发送消息逻辑（实际项目中实现）
            console.log('发送群聊消息:', message);
            input.value = '';
        }
    }

    function closeGroupConnection() {
        // 断开连接逻辑（实际项目中实现）
        console.log('断开群聊连接');
    }

    function sendDeepseekMessage() {
        const input = document.getElementById('deepseekMessageInput');
        const message = input.value.trim();
        if (message) {
            // 发送消息逻辑（实际项目中实现）
            console.log('发送DeepSeek消息:', message);
            input.value = '';
        }
    }
</script>
</body>
</html>